<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule"
               @keyup.enter="onSubmit">
        <el-form-item label="创建日期" prop="createdAt">
          <template #label>
        <span>
          创建日期
          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
            <el-icon><QuestionFilled/></el-icon>
          </el-tooltip>
        </span>
          </template>
          <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期"
                          :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
          —
          <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期"
                          :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-select v-model="searchInfo.level" clearable placeholder="请选择">
            <el-option
                v-for="(item,index) in Level5Arr"
                :key="index"
                :label="item.label"
                value="item.value">
            </el-option>

<!--            <el-option-->
<!--                key="true"-->
<!--                label="是"-->
<!--                value="true ">-->
<!--            </el-option>-->
<!--            <el-option-->
<!--                key="false"-->
<!--                label="否"-->
<!--                value="false ">-->
<!--            </el-option>-->

            <!--              <el-select v-model.number="formData.level"  @change="select" clearable placeholder="等级">-->
            <!--                <el-option v-for="(item,index) in Level5Arr " :key="index" :label="item.label" :value="item.value"></el-option>-->
            <!--              </el-select>-->
          </el-select>
        </el-form-item>
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="searchInfo.name" placeholder="搜索条件"/>

        </el-form-item>
        <el-form-item label="一级分类" prop="pid">

          <el-input v-model.number="searchInfo.pid" placeholder="搜索条件"/>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openDialog">新增</el-button>
        <el-popover v-model:visible="deleteVisible" :disabled="!multipleSelection.length" placement="top" width="160">
          <p>确定要删除吗？</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button type="primary" link @click="deleteVisible = false">取消</el-button>
            <el-button type="primary" @click="onDelete">确定</el-button>
          </div>
          <template #reference>
            <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length"
                       @click="deleteVisible = true">删除
            </el-button>
          </template>
        </el-popover>
      </div>
      <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          :data="tableData"
          row-key="ID"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column align="left" label="日期" width="180">
          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
        </el-table-column>

        <el-table-column align="left" label="等级" prop="level" width="120">
          <template #default="scope">{{ formatBoolean(scope.row.level) }}</template>
        </el-table-column>

        <el-table-column align="left" label="类型名称" width="180">
          <template #default="scope">{{ scope.row.name + "(" + formatBoolean(scope.row.level) + ")" }}</template>
        </el-table-column>
        <el-table-column align="left" label="父级" prop="pidName" width="120"/>

        <el-table-column align="left" label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" link class="table-button" @click="getDetails(scope.row)">
              <el-icon style="margin-right: 5px">
                <InfoFilled/>
              </el-icon>
              查看详情
            </el-button>
            <el-button type="primary" link icon="edit" class="table-button" @click="updateInterviewTypeFunc(scope.row)">
              变更
            </el-button>
            <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type==='create'?'添加':'修改'"
               destroy-on-close>
      <el-scrollbar height="500px">
        <el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" label-width="80px">

          <el-form-item label="等级:" prop="level">
            <el-select v-model.number="formData.level" @change="select" clearable placeholder="等级">
              <el-option v-for="(item,index) in Level5Arr " :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="类型名称:" prop="name">
            <el-input v-model="formData.name" :clearable="true" placeholder="请输入类型名称"/>
          </el-form-item>

          <el-form-item label="一级分类:" prop="pid">
            <el-select v-model.number="formData.pid" @change="select4" clearable placeholder="一级分类">
              <el-option v-for="(item,index) in Level4Arr" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="创建时间:" prop="createAt">
            <el-date-picker v-model="formData.createAt" type="date" style="width:100%" placeholder="选择日期"
                            :clearable="true"/>
          </el-form-item>

          <el-form-item label="修改时间:" prop="updateAt">
            <el-date-picker v-model="formData.updateAt" type="date" style="width:100%" placeholder="选择日期"
                            :clearable="true"/>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="detailShow" style="width: 800px" lock-scroll :before-close="closeDetailShow" title="查看详情"
               destroy-on-close>
      <el-scrollbar height="550px">
        <el-descriptions column="1" border>
          <el-descriptions-item label="createAt字段">
            {{ formatDate(formData.createAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="deleteAt字段">
            {{ formatDate(formData.deleteAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="等级">
            {{ formatBoolean(formData.level) }}
          </el-descriptions-item>
          <el-descriptions-item label="name字段">
            {{ formData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="父级id">
            {{ fromPid(formData.pid) }}
          </el-descriptions-item>
          <el-descriptions-item label="updateAt字段">
            {{ formatDate(formData.updateAt) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  createInterviewType,
  deleteInterviewType,
  deleteInterviewTypeByIds,
  updateInterviewType,
  findInterviewType,
  getInterviewTypeList
} from '@/api/interviewType'

// 全量引入格式化工具 请按需保留
import {getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile} from '@/utils/format'
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref, reactive} from 'vue'

defineOptions({
  name: 'InterviewType'
})

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  createAt: new Date(),
  deleteAt: new Date(),
  level: "",
  name: '',
  pid: "",
  updateAt: new Date(),
})


// 验证规则
const rule = reactive({})

const searchRule = reactive({
  createdAt: [
    {
      validator: (rule, value, callback) => {
        if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
          callback(new Error('请填写结束日期'))
        } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
          callback(new Error('请填写开始日期'))
        } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
          callback(new Error('开始日期应当早于结束日期'))
        } else {
          callback()
        }
      }, trigger: 'change'
    }
  ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})


const Level5Arr = ref([{label: "语言", value: 1}, {label: "技能", value: 2}, {label: "技能点", value: 3}])

const Level4Arr = ref([])

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async (valid) => {
    if (!valid) return
    page.value = 1
    pageSize.value = 10
    if (searchInfo.value.level === "") {
      searchInfo.value.level = null
    }
    getTableData()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  const table = await getInterviewTypeList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

const getTableType = async () => {
  const table = await getInterviewTypeList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
}

// 获取需要的字典 可能为空 按需保留
setOptions()


// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteInterviewTypeFunc(row)
  })
}


// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async () => {
  const ids = []
  if (multipleSelection.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return
  }
  multipleSelection.value &&
  multipleSelection.value.map(item => {
    ids.push(item.ID)
  })
  const res = await deleteInterviewTypeByIds({ids})
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === ids.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTableData()
  }
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateInterviewTypeFunc = async (row) => {
  const res = await findInterviewType({ID: row.ID})
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data.reinterviewTypes
    dialogFormVisible.value = true
  }
}


// 删除行
const deleteInterviewTypeFunc = async (row) => {
  const res = await deleteInterviewType({ID: row.ID})
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    getTableData()
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)


// 查看详情控制标记
const detailShow = ref(false)


// 打开详情弹窗
const openDetailShow = () => {
  detailShow.value = true
}


// 打开详情
const getDetails = async (row) => {
  // 打开弹窗
  const res = await findInterviewType({ID: row.ID})
  if (res.code === 0) {
    formData.value = res.data.reinterviewTypes
    openDetailShow()
  }
}


// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false
  formData.value = {
    createAt: new Date(),
    deleteAt: new Date(),
    level: "",
    name: '',
    pid: "",
    updateAt: new Date(),
  }
}

// const getLevelData = async(level,pid) => {
//   let req = {level:level}
//   if (pid > 0){
//     req = {level:level,pid:pid}
//   }
//   const table = await getInterviewTypeList({ page: 0, pageSize: 999999999, ...req })
//   if (table.code === 0) {
//     for (let i=0;i<table.data.list.length;i++){
//       switch (level){
//         case 2:
//           console.log("case2的",i)
//           Level4Arr.value.push({
//             "label":table.data.list[i].name,
//             "value":table.data.list[i].ID,
//           })
//           break;
//       }
//     }
//     console.log(Level4Arr)
//   }
// }

const getLevelData = async (level) => {
  Level4Arr.value = []
  formData.value.pid = ''
  let req = {level: level}
  const table = await getInterviewTypeList({page: 0, pageSize: 999999999, ...req})
  if (table.code === 0) {
    for (let i = 0; i < table.data.list.length; i++) {
      Level4Arr.value.push({
        "label": table.data.list[i].name,
        "value": table.data.list[i].ID,
      })
    }
    console.log(Level4Arr)
  }
}

// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    createAt: new Date(),
    deleteAt: new Date(),
    level: "",
    name: '',
    pid: "",
    updateAt: new Date(),
  }
}
// 弹窗确定
const enterDialog = async () => {
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createInterviewType(formData.value)
        break
      case 'update':
        res = await updateInterviewType(formData.value)
        break
      default:
        res = await createInterviewType(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

const select = async () => {
  console.log("选择完毕")
  getLevelData(formData.value.level)
}


</script>

<style>

</style>
